<template>
  <header>
    <section>
      <label for="title">ToDoList</label>
      <input
        type="text"
        id="title"
        name="title"
        placeholder="添加ToDo"
        required="required"
        autocomplete="off"
        v-model="title"
        @keyup.enter="add"
      />
    </section>
  </header>
</template>
<script>
import { nanoid } from "nanoid";
export default {
  name: "TodoHeader",
  data() {
    return {
      title: "",
    };
  },
  // props: ["addTodo"],
  methods: {
    add() {
      if (!this.title) return alert("输入不能为空");
      const todoObj = { id: nanoid(), title: this.title, done: false };
      this.$emit("addTodo", todoObj);
      this.title = "";
    },
  },
};
</script>

<style scoped>
header {
  height: 50px;
  background: #333;
  background: rgba(47, 47, 47, 0.98);
}

label {
  float: left;
  width: 100px;
  line-height: 50px;
  color: #ddd;
  font-size: 24px;
  cursor: pointer;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

header input {
  float: right;
  width: 60%;
  height: 24px;
  margin-top: 12px;
  text-indent: 10px;
  border-radius: 5px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24),
    0 1px 6px rgba(0, 0, 0, 0.45) inset;
  border: none;
}

input:focus {
  outline-width: 0;
}
</style>>

